<template>
    <div class="time-container" :style="{ left: isMy ? 'calc(100% - 50%)' : '50%' }">
        <text class="chat-info-time-style">{{ time }}</text>
    </div>
</template>

<script lang="ts">
export default {
    name: 'chat-info-time',
    props: {
        time: {
            type: String,
            default: ''
        },
        isMy: {
            type: Boolean,
            default: false
        }
    }
}
</script>

<style scoped>
.time-container {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    white-space: nowrap;
}

.chat-info-time-style {
    background-color: #cccccc;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
}

.chat-info-time {
    position: relative;
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    width: 100%;
    left: 0;
    border: none;
}

.isMyTimeStyle {
    text-align: right;
}

.isOtherTimeStyle {
    text-align: left;
}
</style>